<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css" />

<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCVcuVK2AXYU4FkMzMZkccENM0Uz79VEFI&sensor=false"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var map;// = new google.maps.Map();
						var map2;// = new google.maps.Map();
						$(".editProject").click(function() {
							$("#EditProjectPopup").show();
							$("#EditCompanyPopup").hide();
							$("#EditResourcePopup").hide();
							$("#upLocation").val($("#cpLocation", $(this).parent()).val());
							$("#upResource").val($("#cpResource", $(this).parent()).val());
							$("#upName").val($("#cpName", $(this).parent()).val());
							$("#upLat").val($("#cpLat", $(this).parent()).val());
							$("#upLng").val($("#cpLng", $(this).parent()).val());
							$("#upID").val($(this).parent().attr("proID"));
							google.maps.event.trigger(map2, "resize");
						});
						
						$(".editCompany").click(function() {
							$("#EditProjectPopup").hide();
							$("#EditCompanyPopup").show();
							$("#EditResourcePopup").hide();
							
							$("#ucName").val($("#ccName", $(this).parent()).val());
							$("#ucID").val($(this).parent().attr("compID"));
						});
						
						$(".editResource").click(function() {
							$("#EditProjectPopup").hide();
							$("#EditCompanyPopup").hide();
							$("#EditResourcePopup").show();
							
							$("#urFirstName").val($("#crFirstName",$(this).parent()).val());
							$("#urLastName").val($("#crLastName",$(this).parent()).val());
							$("#urEmail").val($("#crEmail",$(this).parent()).val());
							$("#urID").val($(this).parent().attr("hrID"));
							$("#urRegion").val($("#crRegion", $(this).parent()).val());
							$("#urExpertise").val($("#crExpertise", $(this).parent()).val());
						});
						
						$(".closePopup").click(function(){
							$("#EditProjectPopup").hide();
							$("#EditCompanyPopup").hide();
							$("#EditResourcePopup").hide();
						});
						$(".deleteProject")
								.click(
										function() {
											var doDelete = confirm("Delete this project?");
					
											if (doDelete == true)
												window.location = "DeleteProject?id="
														+ $(this).parent()
																.parent()
																.attr("proID");
										});

						$(".deleteCompany")
								.click(
										function() {
											var doDelete = confirm("Delete this company?");
							;
											if (doDelete == true)
												window.location = "DeleteCompany?id="
														+ $(this).parent()
																.parent()
																.attr("compID");
										});

						$(".deleteResource")
								.click(
										function() {
											var doDelete = confirm("Delete this human resource?");
											if (doDelete == true)
												window.location = "DeleteResource?id="
														+ $(this).parent()
																.parent().attr(
																		"hrID");
										});
										
						$(".createHeader")
								.click(
										function() {
											var $necessaryDiv = $(
													".creationDiv", $(this)
															.parent());
											if ($necessaryDiv.attr("state") == "up") {
												$necessaryDiv.slideDown(200);
												
												if($necessaryDiv.attr("id") == "projectCreationDiv" && $necessaryDiv.attr("state") == "up") {
												$("#companyDiv").attr("state", "up");
												$("#companyDiv").slideUp(200);
												$("#resourceDiv").attr("state", "up");
												$("#resourceDiv").slideUp(200);
											}
											else if($necessaryDiv.attr("id") == "companyDiv" && $necessaryDiv.attr("state") == "up") {
												$("#projectCreationDiv").attr("state", "up");
												$("#projectCreationDiv").slideUp(200);
												$("#resourceDiv").attr("state", "up");
												$("#resourceDiv").slideUp(200);
											}
											else if($necessaryDiv.attr("id") == "resourceDiv" && $necessaryDiv.attr("state") == "up") {
												$("#companyDiv").attr("state", "up");
												$("#companyDiv").slideUp(200);
												$("#projectCreationDiv").attr("state", "up");
												$("#projectCreationDiv").slideUp(200);
											}
											
												$necessaryDiv.attr("state",
														"down");
														
											

											} else {
												$necessaryDiv.slideUp(200);
												$necessaryDiv.attr("state",
														"up");
											}
											
											

											$($("#.creationDiv[state=]"));
											if ($necessaryDiv.attr("id") == "projectCreationDiv") {
												google.maps.event.trigger(map,
														"resize");
											}
											
											
										});

						$(".navButton")
								.click(
										function() {
											if ($(this).attr("type") == "NavOverview") {
												$("#OverviewTab").show();
												$("#CreationTab").hide();
												$("#ManageTab").hide();
												$(".selectedNavButton")
														.removeClass(
																"selectedNavButton");
												$(this).addClass(
														"selectedNavButton");
											} else if ($(this).attr("type") == "NavCreate") {
												$("#OverviewTab").hide();
												$("#CreationTab").show();
												$("#ManageTab").hide();
												$(".selectedNavButton")
														.removeClass(
																"selectedNavButton");
												$(this).addClass(
														"selectedNavButton");
											} else {
												$("#OverviewTab").hide();
												$("#CreationTab").hide();
												$("#ManageTab").show();
												$(".selectedNavButton")
														.removeClass(
																"selectedNavButton");
												$(this).addClass(
														"selectedNavButton");
											}

										});

						//Map for validation
						var marker = new google.maps.Marker();
						var geocoder = new google.maps.Geocoder();
						var myLatlng = new google.maps.LatLng(45.683820,
								-115.338867);
						var myOptions = {
							zoom : 4,
							center : myLatlng,
							mapTypeId : google.maps.MapTypeId.ROADMAP
						};
						map = new google.maps.Map(document
								.getElementById("map_canvas"), myOptions);
						map2 = new google.maps.Map(document
								.getElementById("map_canvas2"), myOptions);
						//Client side validation
						$("#projectSubmit").hide();
						$("#projectValidation").click(
								function(e) {
									$("#projectError").html("");
									e.preventDefault();
									//$("#projectValidation").hide();
									//Location Validation

									if ($("#projectName").val().length == 0) {
										$("#projectError").html(
												"Must have a project name");
									}
									if ($("#location").val().length != 0) {
										validateLocation($("#location").val());
									} else {
										$("#projectValidation").show();
										$("#projectError").html(
												"Empty location");
									}
									return false;
								});
						$("#location").change(function() {
							marker.setMap(null);
							$("#projectSubmit").hide();
							$("#projectValidation").show();
						});

						function validateLocation(location) {
							geocoder
									.geocode(
											{
												'address' : location
											},
											function(results, status) {
												switch (status) {
												case google.maps.GeocoderStatus.OK:
													//console.log("Success w/ # of results: " + results.length +" . Top results: " + results[0]);
													//console.log(results);
													var geolocation = results[0].geometry.location;
													$("#location")
															.val(
																	results[0].formatted_address);
													$("#lat").val(
															geolocation.$a);
													$("#lng").val(
															geolocation.ab);
													//console.log(geolocation);
													marker = new google.maps.Marker(
															{
																position : geolocation,
																map : map,
																title : results[0].formatted_address
															});
													marker = new google.maps.Marker(
															{
																position : geolocation,
																map : map2,
																title : results[0].formatted_address
															});
													map.setCenter(geolocation);
													map2.setCenter(geolocation);
													$("#projectValidation")
															.hide();
													$("#projectSubmit").show();
													break;
												case google.maps.GeocoderStatus.ZERO_RESULTS:
													$("#projectError")
															.html(
																	"The address provided is not valid");
													break;
												default:
													$("#projectError")
															.html(
																	"An error occured while validating this address");
												}
											});
						}
					});
</script>
</head>
<body>
	<div id="banner">
		<h1 id="logo">
			<a href="Home" style="text-decoration: none; color: #ffffff;">Project
				Locator</a>
		</h1>	
		<a href="Create" class="navLink"> > Dashboard</a>
	</div>
	<br/>	

	<c:forEach items="${errs}" var="err">
		<h1>
			<c:out value="${err}" />
		</h1>
	</c:forEach>
	<div id="CreationTab" style="float: right;">
		<div class="tabBorder">
			<div class="pageHeader">Create</div>

			<div id="CreateProjectDiv" class="createDiv">
				<div class="createHeader">Project</div>
				<div class="creationDiv" id="projectCreationDiv" state="up">
					<form action="CreateProject" method="post">
						<div>
							<span id="projectError" style="color: red;"></span>
						</div>
						<label>Project Name</label> <input type="text" name="name"
							id="projectName" /><br /> <label>Location</label> <input
							type="text" name="location" id="location" /> <input
							type="hidden" name="lat" id="lat" /> <input type="hidden"
							name="lng" id="lng" /> <br /> <br />
						<br /> <br />
						<div style="width: 350px; height: 250px;">
							<div id="map_canvas" style="width: 100%; height: 100%;"></div>
						</div>
						<label>Company</label> <select name="company" id="projectCompany">
							<c:forEach items="${ companies }" var="company">
								<option value="${company.companyID }">
									<c:out value="${company.name }" />
								</option>
							</c:forEach>
						</select> <br /> <label>Resources</label> <select size="5"
							multiple="multiple" name="humanResources" id="projectResources">
							<c:forEach items="${ resources }" var="resource">
								<option value="${resource.humanResourceID }">
									<c:out value="${resource.firstName }" />
									<c:out value="${resource.lastName }" />
								</option>
							</c:forEach>
						</select> <br />
						<button id="projectValidation" class="submit">validate</button>
						<input type="submit" id="projectSubmit" value="submit"
							class="submit" /> <br />
					</form>
				</div>
			</div>

			<div id="CreateCompanyDiv" class="createDiv">
				<div class="createHeader">Company</div>
				<div class="creationDiv" id="companyDiv" state="up">
					<form action="CreateCompany" method="post">
						<label>Company Name</label> <input type="text" name="companyName" /><br />
						<input type="submit" value="submit" class="submit" /> <br />
					</form>
				</div>
			</div>

			<div id="CreateResourceDiv" class="createDiv">
				<div class="createHeader">Resource</div>
				<div class="creationDiv" id="resourceDiv" state="up">
					<form action="CreateResource" method="post">
						<label>First Name</label> <input type="text" name="firstName" /><br />
						<label>Last Name</label> <input type="text" name="lastName" /><br />
						<label>Email</label> <input type="text" name="email" "/><br /> <label>Region</label>
						<select name="region" id="region">
							<option value="Eastern US">Eastern US</option>
							<option value="Central US">Central US</option>
							<option value="Western US">Western US</option>
							<option value="South America">South America</option>
							<option value="Europe">Europe</option>
							<option value="India">India</option>
						</select><br /> <label>Business Unit</label> <select name="expertise"
							id="expertise">
							<option value="Digital Business Services">Digital
								Business Services</option>
							<option value="Portal/Social Collaboration">Portal/Social
								Collaboration</option>
							<option value="Commerce">Commerce</option>
							<option value="Integrated Solutions Group">Integrated
								Solution Group</option>
							<option value="Software Engineering">Software
								Engineering</option>
							<option value="Management Services">Management Services</option>
						</select> <br /> <input type="submit" value="submit" class="submit" /> <br />
					</form>
				</div>
			</div>
		</div>
	</div>

	<div id="ManageTab" style="float: left;">
		<div class="tabBorder" style="height: 600px;">
			<div class="pageHeader">Manage</div>
			<div id="ManageProjects" class="manageDiv">
				<div class="createHeader">Project</div>
				<div class="manageContent">
					<c:forEach items="${ projects }" var="project">
						<div proID="${project.projectID }">
							<c:out value="${project.projectName }" />
							<a href="#"><img style="float: right;" class="deleteProject"
								src="Images/notification_error.png" height="17" width="17	" />
							</a>
							<span style="cursor: pointer;" class="editProject"><img
								style="float: right; margin-left: 10px;"
								src="Images/pencil-icon.png" height="17" width="17">
							</span>
							<input type="hidden" id="cpCompany" value="${project.company.name }"/>
							<input type="hidden" id="cpLocation" value="${project.location}"/>
							<input type="hidden" id="cpName" value="${project.projectName}"/>
							<input type="hidden" id="cpLat" value="${project.latitude}"/>
							<input type="hidden" id="cpLng" value="${project.longitude}"/>
							<c:forEach items="${project.humanResources }" var="resource">
								<input type="hidden" value="${resource.ID }" class="cpHRs"/>
							</c:forEach>
						</div>

					</c:forEach>
				</div>
			</div>
			<div id="ManageCompanies" class="manageDiv">
				<div class="createHeader">Company</div>
				<div class="manageContent">
					<c:forEach items="${ companies }" var="company">
						<div compID="${company.companyID }">
							<c:out value="${company.name }" />
							<a href="#"><img style="float: right;" class="deleteCompany"
								src="Images/notification_error.png" height="17" width="17	" />
							</a><a href="#" class="editCompany"><img
								style="float: right; margin-left: 10px;"
								src="Images/pencil-icon.png" height="17" width="17">
							</a>
							<input type="hidden" value="${company.name }" id="ccName"/>
							
						</div>
					</c:forEach>
				</div>
			</div>
			<div id="ManageResources" class="manageDiv">
				<div class="createHeader">Resource</div>
				<div class="manageContent">
					<c:forEach items="${ resources }" var="resource">
						<div hrID="${resource.humanResourceID }">
							<c:out value="${resource.firstName }" />
							<c:out value="${resource.lastName }" />
							<a href="#"><img style="float: right;" class="deleteResource"
								src="Images/notification_error.png" height="17" width="17	" />
							</a><a href="#" class="editResource"><img
								style="float: right; margin-left: 10px;"
								src="Images/pencil-icon.png" height="17" width="17">
							</a>
						<input type="hidden" value="${resource.firstName }" id="crFirstName"/>
						<input type="hidden" value="${resource.lastName}" id="crLastName"/>
						<input type="hidden" value="${resource.email }" id="crEmail"/>
						<input type="hidden" value="${resource.region }" id="crRegion"/>
						<input type="hidden" value="${resource.expertise }" id="crExpertise"/>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<div id="EditCompanyPopup" class="Popup">
	<span style="float:right;cursor: pointer;"class="closePopup">X</span>
		<div class="pageHeader">Edit Company</div> 
								<form action="UpdateCompany" method="post">
								<input type="hidden" name="id" id="ucID"/>
						<label>Company Name</label> <input type="text" name="companyName" id="ucName"/><br />
						<input type="submit" value="submit" class="submit" /> <br />
						
					</form>
	</div>
	<div id="EditResourcePopup" class="Popup">
	<span style="float:right;cursor: pointer;"class="closePopup">X</span>
			<div class="pageHeader">Edit Resource</div> 
		<form action="UpdateResource" method="post">
						<input type="hidden" name="id" id="urID"/>
						<label>First Name</label> <input type="text" name="firstName" id="urFirstName"/><br />
						<label>Last Name</label> <input type="text" name="lastName" id="urLastName"/><br />
						<label>Email</label> <input type="text" name="email" id="urEmail"/><br /> <label>Region</label>
						<select name="region" id="urRegion">
							<option value="Eastern US">Eastern US</option>
							<option value="Central US">Central US</option>
							<option value="Western US">Western US</option>
							<option value="South America">South America</option>
							<option value="Europe">Europe</option>
							<option value="India">India</option>
						</select><br /> <label>Business Unit</label> <select name="expertise"
							id="urExpertise">
							<option value="Digital Business Services">Digital
								Business Services</option>
							<option value="Portal/Social Collaboration">Portal/Social
								Collaboration</option>
							<option value="Commerce">Commerce</option>
							<option value="Integrated Solutions Group">Integrated
								Solution Group</option>
							<option value="Software Engineering">Software
								Engineering</option>
							<option value="Management Services">Management Services</option>
						</select> <br /> <input type="submit" value="submit" class="submit" /> <br />
					</form>
	</div>
	
	<div id="EditProjectPopup" class="Popup">
	<span style="float:right;cursor: pointer;"class="closePopup">X</span>
			<div class="pageHeader">Edit Project</div>
			<form action="UpdateProject" method="post">
			<input type="hidden" name="id" id="upID"/>
						<div>
							<span id="projectError" style="color: red;"></span>
						</div>
						<label>Project Name</label> <input type="text" name="projectName"
							id="upName" /><br /> 
							<label>Location</label> <input 
							type="text" name="location" id="upLocation" /> 
							<input
							type="hidden" name="lat" id="upLat" /> 
							<input type="hidden"
							name="lng" id="upLng" /> <br /> 
					
						<div style="width: 350px; height: 250px;">
							<div id="map_canvas2" style="width: 100%; height: 100%;"></div>
						</div>
						<label>Company</label> <select name="company" id="upCompany">
							<c:forEach items="${ companies }" var="company">
								<option value="${company.companyID }">
									<c:out value="${company.name }" />
								</option>
							</c:forEach>
						</select> <br /> <label>Resources</label> <select size="5"
							multiple="multiple" name="humanResources" id="projectResources">
							<c:forEach items="${ resources }" var="resource">
								<option hrID="${resource.humanResourceID }" value="${resource.humanResourceID }">
									<c:out value="${resource.firstName }" />
									<c:out value="${resource.lastName }" />
								</option>
							</c:forEach>
						</select> <br /> <br /> 

						<input type="submit" id="projectSubmit" value="submit"
							class="submit" /> <br />
					</form>
	</div>
</body>
</html>